<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
		<head>
				<base href=<%=basePath%>>
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<%--分页插件--%>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css"/>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

<script type="text/javascript">

	$(function(){
		$("#createActivityBtn").on("click",function () {
			//init
			$("#createActivityForm").get(0).reset();
			$("#createActivityModal").modal("show");
		});

		$("#saveBtn").on("click",function () {
			//收集参数
			const owner = $("#create-marketActivityOwner").val();
			const name = $("#create-marketActivityName").val();
			const start_date = $("#create-startTime").val();
			const end_date = $("#create-endTime").val();
			const cost = $("#create-cost").val();
			const description = $("#create-describe").val();
			//表单验证
			if(owner==""){
				alert("所有者不能为空！");
				return;
			}
			if(name==""){
				alert("名称不能为空");
				return;
			}
			if(start_date!=""&&end_date!=""){
				if(end_date<start_date){
					alert("结束日期不能小于开始日期");
					return;
				}
			}else{
				alert("开始日期或者结束日期不能为空！");
				return;
			}

			let regExp = /^(([1-9]\d*)|0)$/;
			if(!regExp.test(cost)){
				alert("成本只能为非负整数。");
				return;
			}
			$.ajax({//发送请求
				url:"workbench/activity/saveActivity.do",
				data:{
					owner:owner,
					name:name,
					startdate:start_date,
					enddate:end_date,
					cost:cost,
					description:description
				},
				type:'post',
				dataType:'json',
				success:function (data) {
					if(data.code=="1"){
						alert(data.message);
						$("#createActivityModal").modal("hide");
						//刷新内容
						queryActivity(1,$("#pageShow").bs_pagination('getOption','rowsPerPage'));
					}else{
						alert(data.message);
						$("#createActivityModal").modal("show");
					}
				}
			});
		});
		
		$(".datepicker").datetimepicker({
			language:'zh-CN',
			format:'yyyy-mm-dd',
			minView:'month',
			initialDate:new Date(),
			autoclose:true,
			todayBtn:true,
			clear:true
		});
		
		$("#deleteActivityBtn").on("click",function () {
			const checkedIds = $("#tBody input[type='checkbox']:checked");
			if(checkedIds.size()==0){
				alert("未选择。");
				return;
			}
			if(window.confirm("确定删除嘛？")){
				var ids="";
				$.each(checkedIds,function (index,obj) {
					ids+="ids="+obj.value+"&";
				});
				ids=ids.substring(0,ids.length-1);
				$.ajax({
					url:"workbench/activity/deleteActivityByIds.do",
					data:ids,
					type:'post',
					dataType:'json',
					success:function (data) {
						if(data.code=="1"){
							queryActivity(1,$("#pageShow").bs_pagination('getOption','rowsPerPage'));
							alert(data.message);
						}else{
							alert(data.message);
						}
					}
				});
			}
		});
		
		queryActivity(1,10);
		$("#queryBtn").on("click",function () {
			var rowsPerPage = $("#pageShow").bs_pagination('getOption','rowsPerPage');
			queryActivity(1,rowsPerPage);
		});
		
		$("#checkAll").on("click",function () {
			//获取tBody下的所有checkbox子标签
			$("#tBody input[type='checkbox']").prop("checked",this.checked);
			
		});
		$("#tBody").on("click","input[type='checkbox']",function () {
			const check_all = $("#tBody input[type='checkbox']").size() === $("#tBody input[type='checkbox']:checked").size();
			$("#checkAll").prop("checked",check_all);
		});

		$("#editBtn").on("click",function () {
			//收集信息
			const checkedIds = $("#tBody input[type='checkbox']:checked");
			if(checkedIds.size()!=1){
				alert("请选择一个要修改的项。");
				return;
			}
			let owner = checkedIds[0].value;
			$.ajax({
				url:"workbench/activity/queryActivityById.do",
				data:{
					id:owner
				},
				type: 'post',
				dataType: 'json',
				success:function (data) {
					if(data.code=='1'){
						//填充数据
						$("#edit-marketActivityOwner").val(data.retData.owner_id);
						$("#edit-marketActivityName").val(data.retData.name);
						$("#edit-startTime").val(data.retData.startDate);
						$("#edit-endTime").val(data.retData.endDate);
						$("#edit-cost").val(data.retData.cost);
						$("#edit-describe").text(data.retData.description);

						$("#editActivityModal").modal("show");
					}else{
						alert(data.message);
					}
				}
			});
		});
		$("#editUpdateBtn").on("click",function () {
			const checkedIds = $("#tBody input[type='checkbox']:checked");
			let id = checkedIds[0].value;
			update(id);
		})
	});
	
	
	function queryActivity(pageNo,pageSize) {
		//显示查询的结果
		let query_name=$("#query-name").val();
		let query_owner=$("#query-owner").val();
		let query_endTime=$("#query-endTime").val();
		let query_startTime=$("#query-startTime").val();
		// let query_pageNo=1;
		// let query_pageSize=10;
		$.ajax({
			url:"workbench/activity/queryActivityByConditionForPage.do",
			data:{
				name:query_name,
				owner:query_owner,
				startDate:query_startTime,
				endDate:query_endTime,
				pageNo:pageNo,
				pageSize:pageSize
			},
			type:'post',
			dataType:'json',
			success:function (data) {
				// $("#totalRows").text(data.count);
				let htmlStr = "";
				$.each(data.activityList,function (index,obj) {
					htmlStr+="<tr class=\"active\">";
					htmlStr+="<td><input type=\"checkbox\" value='"+obj.id+"' /></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="<td>"+obj.startdate+"</td>";
					htmlStr+="<td>"+obj.enddate+"</td>";
					htmlStr+="</tr>";
				});
				$("#tBody").html(htmlStr);
				$("#checkAll").prop("checked",false);

				var totalPages = 1;
				if(data.count%pageSize==0){
					totalPages = data.count/pageSize;
				}else{
					totalPages = parseInt(data.count/pageSize)+1;
				}
				//显示翻页信息
				$("#pageShow").bs_pagination({
					currentPage:pageNo,
					rowsPerPage:pageSize,
					totalRows:data.count,
					totalPages: totalPages,

					visiblePageLinks: 5,
					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,

					onChangePage: function (event,pageObj) {
						queryActivity(pageObj.currentPage,pageObj.rowsPerPage);
					}
				})
			}
		});
	}

	function update(id) {
		//收集参数
		const owner = $("#edit-marketActivityOwner").val();
		const name = $("#edit-marketActivityName").val();
		const start_date = $("#edit-startTime").val();
		const end_date = $("#edit-endTime").val();
		const cost = $("#edit-cost").val();
		const description = $("#edit-describe").val();
		//表单验证
		if(owner==""){
			alert("所有者不能为空！");
			return;
		}
		if(name==""){
			alert("名称不能为空");
			return;
		}
		if(start_date!=""&&end_date!=""){
			if(end_date<start_date){
				alert("结束日期不能小于开始日期");
				return;
			}
		}else{
			alert("开始日期或者结束日期不能为空！");
			return;
		}

		let regExp = /^(([1-9]\d*)|0)$/;
		if(!regExp.test(cost)){
			alert("成本只能为非负整数。");
			return;
		}
		$.ajax({//发送请求
			url:"workbench/activity/updateActivityById.do",
			data:{
				id:id,
				owner:owner,
				name:name,
				startdate:start_date,
				enddate:end_date,
				cost:cost,
				description:description
			},
			type:'post',
			dataType:'json',
			success:function (data) {
				if(data.code=="1"){
					alert("修改成功");
					$("#editActivityModal").modal("hide");
					//刷新内容
					queryActivity($("#pageShow").bs_pagination('getOption','currentPage'),
							$("#pageShow").bs_pagination('getOption','rowsPerPage'));
				}else{
					alert(data.message);
					$("#createActivityModal").modal("show");
				}
			}
		});
	}
	
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="createActivityForm">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
								  <c:forEach items="${userList}" var="user">
									  <option value="${user.id}">${user.name}</option>
								  </c:forEach>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datepicker" id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datepicker" id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
									<c:forEach items="${userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-startTime">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-endTime">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="editUpdateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 导入市场活动的模态窗口 -->
    <div class="modal fade" id="importActivityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
                </div>
                <div class="modal-body" style="height: 350px;">
                    <div style="position: relative;top: 20px; left: 50px;">
                        请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                    </div>
                    <div style="position: relative;top: 40px; left: 50px;">
                        <input type="file" id="activityFile">
                    </div>
                    <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
                        <h3>重要提示</h3>
                        <ul>
                            <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                            <li>给定文件的第一行将视为字段名。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="query-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="query-owner">
				    </div>
				  </div>

				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="query-startTime" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="query-endTime">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="queryBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
                    <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
                    <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
                </div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="tBody">

					</tbody>
				</table>

				<div id="pageShow"></div>
			</div>

<%--			<div style="height: 50px; position: relative;top: 30px;">--%>
<%--				<div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRows"></b>条记录</button>--%>
<%--				</div>--%>
<%--				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
<%--					<div class="btn-group">--%>
<%--						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
<%--							10--%>
<%--							<span class="caret"></span>--%>
<%--						</button>--%>
<%--						<ul class="dropdown-menu" role="menu">--%>
<%--							<li><a href="#">20</a></li>--%>
<%--							<li><a href="#">30</a></li>--%>
<%--						</ul>--%>
<%--					</div>--%>
<%--					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
<%--				</div>--%>
<%--				<div style="position: relative;top: -88px; left: 285px;">--%>
<%--					<nav>--%>
<%--						<ul class="pagination">--%>
<%--							<li class="disabled"><a href="#">首页</a></li>--%>
<%--							<li class="disabled"><a href="#">上一页</a></li>--%>
<%--							<li class="active"><a href="#">1</a></li>--%>
<%--							<li><a href="#">2</a></li>--%>
<%--							<li><a href="#">3</a></li>--%>
<%--							<li><a href="#">4</a></li>--%>
<%--							<li><a href="#">5</a></li>--%>
<%--							<li><a href="#">下一页</a></li>--%>
<%--							<li class="disabled"><a href="#">末页</a></li>--%>
<%--						</ul>--%>
<%--					</nav>--%>
<%--				</div>--%>
<%--			</div>--%>
			
		</div>
		
	</div>
</body>
</html>